<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>告警历史 - Prometheus 管理器</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Prometheus 管理器</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/collectors">采集器</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/alert_rules">告警规则</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/notifications">通知配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/alert_history">告警历史</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2 class="mb-4">告警历史</h2>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>告警名称</th>
                        <th>严重程度</th>
                        <th>状态</th>
                        <th>实例</th>
                        <th>通知状态</th>
                        <th>发生时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for alert in alert_history %}
                    <tr>
                        <td>{{ alert.id }}</td>
                        <td>{{ alert.alert_name }}</td>
                        <td>
                            {% if alert.severity == 'critical' %}
                                <span class="badge bg-danger">严重</span>
                            {% elif alert.severity == 'warning' %}
                                <span class="badge bg-warning">警告</span>
                            {% else %}
                                <span class="badge bg-info">{{ alert.severity }}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if alert.status == 'firing' %}
                                <span class="badge bg-danger">触发中</span>
                            {% else %}
                                <span class="badge bg-success">已解决</span>
                            {% endif %}
                        </td>
                        <td>{{ alert.instance }}</td>
                        <td>
                            {% if alert.notified %}
                                <span class="badge bg-success">已通知</span>
                            {% else %}
                                <span class="badge bg-secondary">未通知</span>
                            {% endif %}
                        </td>
                        <td>{{ alert.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-info" onclick="viewAlertDetails({{ alert.id }})">
                                <i class="bi bi-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 告警详情模态框 -->
    <div class="modal fade" id="alertDetailsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">告警详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="alertDetailsContent">
                    <!-- 详情内容将通过JS动态加载 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/bootstrap.bundle.min.js"></script>
    <script>
        async function viewAlertDetails(id) {
            try {
                const response = await fetch(`/api/alert_history/`);
                const alerts = await response.json();
                const alert = alerts.find(a => a.id === id);
                
                if (alert) {
                    const detailsContent = `
                        <div class="row">
                            <div class="col-md-6">
                                <strong>告警名称:</strong> ${alert.alert_name}
                            </div>
                            <div class="col-md-6">
                                <strong>严重程度:</strong> ${alert.severity}
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <strong>状态:</strong> ${alert.status}
                            </div>
                            <div class="col-md-6">
                                <strong>实例:</strong> ${alert.instance}
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <strong>通知状态:</strong> ${alert.notified ? '已通知' : '未通知'}
                            </div>
                            <div class="col-md-6">
                                <strong>发生时间:</strong> ${new Date(alert.created_at).toLocaleString()}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <strong>摘要:</strong><br>
                                ${alert.summary || '无'}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <strong>描述:</strong><br>
                                ${alert.description || '无'}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <strong>值:</strong><br>
                                ${alert.value || '无'}
                            </div>
                        </div>
                    `;
                    
                    document.getElementById('alertDetailsContent').innerHTML = detailsContent;
                    new bootstrap.Modal(document.getElementById('alertDetailsModal')).show();
                }
            } catch (error) {
                console.error('Error:', error);
                alert('获取告警详情失败');
            }
        }
    </script>
</body>
</html>